<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
 window._AMapSecurityConfig = {
    securityJsCode: "b90fb324de0303cb462b4f37cfeecc1e",
  };
let map = null;

onMounted(() => {
 
  AMapLoader.load({
    key: "fc4d9ad4125794c91375c4811e18958b", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.HawkEye"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
       var map = new AMap.Map("container", {
        resizeEnable: true
    })
    var scale = new AMap.Scale({
        visible: true
    })
   var toolBar = new AMap.ToolBar({
        visible: true,
        position: {
          top: '110px',
         left: '40px'
        }
    })
     var controlBar = new AMap.ControlBar({
        visible: true,
        position: {
          top: '10px',
          left: '10px'
        }
    })
    var overView = new AMap.HawkEye({
        visible: true
    })
    map.addControl(scale);
    map.addControl(toolBar);
    map.addControl(controlBar);
    map.addControl(overView);
    //输入提示
    var autoOptions = {
        input: "tipinput"
    };

    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
    });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container">
<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>请输入关键字：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput"/>
            </td>
        </tr>
    </table>
</div>
</div>
</template>

<style scoped>
#container {
  width:100%;
  position: relative;
  height: 90%;
}
#myPageTop{
  z-index: 1;
}
</style>
<!-- <template>
  百度
</template>

<script>

</script>

<style>

<yle> -->